<!-- 省市信息 -->
<template>
    <div>
        <van-popup
        v-model:show="showArea"
        position="bottom"
        :style="{ height: '35%' }"
        >
            <van-area title="标题" @cancel="showArea = false" :value="value" @confirm="selProvince" :area-list="areaList" :columns-num="columnsNum" />
        </van-popup>
    </div>
</template>

<script>
import { ref, reactive, inject, getCurrentInstance } from 'vue';
import { Popup , Area } from 'vant';
import { areaList } from '@vant/area-data';
export default {
    components: {
        [Popup.name]: Popup,
        [Area.name]: Area,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const showArea = inject('showArea');
        const columnsNum = inject('columnsNum');
        const value = ref([]);

        const selProvince = (val) =>{
            console.log(val)
            showArea.value = false;
            proxy.$emit('provinceChange',val)
        }

        return {
            showArea,
            columnsNum,
            areaList,
            selProvince,
            value,
        }
    }
}

</script>
<style scoped>

</style>